<template>
    <div>
        <el-form ref="ruleFormRef" :model="quesData" :rules="rules" class="question-info">
            <div>
                <div class="info1">
                    <div class="title">
                        <span>题干</span>
                        <el-form-item prop="questionTitle">
                            <el-input v-model="quesData.questionTitle" type="textarea" placeholder="题干，点此编辑（必填）"
                                class="input" />
                        </el-form-item>
                    </div>
                    <el-divider border-style="dashed" />
                </div>
            </div>
            <div class="info2">
                <div class="switch">
                    <div class="switch-border"><span class="switch-word">是否乱序</span></div>
                    <el-switch class="el-switch" v-model="quesData.outOfOrder" inline-prompt active-text="是"
                        inactive-text="否" :active-value="1" :inactive-value="0" />
                </div>
                <div class="xuanxiang">
                    <div class="spanBoder"><span class="words">答案</span></div>
                    <div>
                        <div class="xuanxiangzhi" v-for="(item, index) in quesData.questionAnswer">
                            <el-input v-model="quesData.questionAnswer[index]" class="input"
                                placeholder="选项，支持有多个答案，多个答案间使用 ； 隔开（必填）">
                                <template #prepend>{{ index + 1 }}.</template>
                            </el-input>
                            <div v-show="display" class="delete iconfont icon-shanchu" @click="deleteXuanXiang(index)">
                            </div>
                        </div>
                    </div>
                </div>
                <div v-show="display" class="add iconfont icon-tianjia" @click="addXuanXiang">添加一个空</div>
            </div>
            <div>
                <el-divider border-style="dashed" />
                <div class="info3">
                    <span>解析</span>
                    <el-form-item prop="description">
                        <el-input v-model="quesData.description" type="textarea" placeholder="题目解析，点此编辑（选填）"
                            class="input" />
                    </el-form-item>

                </div>
            </div>
        </el-form>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineExpose, watch } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus';
import { getqueryBankAPI } from '@/api/api'

const route = useRoute()

const props = defineProps({
    childData: {
        default: {}
    },
    questionId: {
        default: "",
    }
})
const quesData = ref({
    //题目
    questionTitle: '',
    //答案
    questionAnswer: [],
    //解析
    description: '',
    //是否乱序
    outOfOrder: 0,
})

const display = ref(true)

const ruleFormRef = ref(null)
const rules = reactive({
    questionTitle: [
        { required: true, message: '请填写题目内容', trigger: 'change' },
    ],
    description: [
        { required: true, message: '请填写解析，若无请写‘无数据’', trigger: 'change' },
    ],
})

//初始化给一个空
onMounted(() => {
    if (route.path.includes('checkQuestion')) {
        display.value = false
    }
    if (props.childData.questionAnswer) {
        quesData.value = props.childData
    }
    if (props.questionId) {
        //查询题目
        getqueryBankAPI(props.questionId).then(res => {
            if (res.data.code == 200) {
                res.data.data.questionAnswer = JSON.parse(res.data.data.questionAnswer)
                quesData.value = res.data.data
                console.log(res.data.data,'data填空题');
            }
        })
    }
    if (quesData.value.questionAnswer.length == 0) {
        for (let i = 0; i < 1; i++) {
            quesData.value.questionAnswer.push('')
        }
    }

    
})

watch(() => quesData.value, (value) => {
    emit('update:childData', value)
}, { deep: true })


//将填空题里的值传给父组件(添加题库时)
const addData = ref([])
const emit = defineEmits(['tianKongChild-click', 'update:childData'])
const tianKongData = () => {
    const answerData = quesData.value.questionAnswer
    const isCompleteness1 = (currentValue) => currentValue !== "";
    const isCompleteness2 = (currentValue) => currentValue !== undefined;
    if (answerData.every(isCompleteness1)) {
        if (answerData.every(isCompleteness2)) {
            ruleFormRef.value.validate((valid) => {
                if (valid) {
                    console.log("通过");
                    addData.value.push({
                        questionTitle: quesData.value.questionTitle,
                        questionAnswer: JSON.stringify(quesData.value.questionAnswer),
                        description: quesData.value.description,
                    })

                    console.log(addData.value, '父组件触发子组件了');
                    emit('tianKongChild-click', addData.value);
                } else {
                    console.log("未通过");
                }
            });
        } else {
            alert('请输入完整的答案');
        }
    } else {
        alert('请输入完整的答案');
    }
}

//重置数据
const tianKongClearData = () => {
    quesData.value.questionTitle = ''
    quesData.value.outOfOrder = 0
    quesData.value.questionAnswer = []
    quesData.value.description = ''
    if (quesData.value.questionAnswer.length == 0) {
        for (let i = 0; i < 1; i++) {
            quesData.value.questionAnswer.push('')
        }
    }
}
defineExpose({
    tianKongData, tianKongClearData
})

//添加选项
const addXuanXiang = () => {
    if (quesData.value.questionAnswer.length < 20) {
        quesData.value.questionAnswer.push('')
    }
}
//删除选项
const deleteXuanXiang = (index) => {
    if (quesData.value.questionAnswer.length > 1) {
        quesData.value.questionAnswer.splice(index, 1)
    } else {
        ElMessage.warning('至少需要一个空格')
    }
}
</script>

<style lang="less" scoped>
.info1 {
    .title {
        margin-top: 25px;
        display: flex;
        
        span {
            font-size: small;
            width: 30px;
            height: 20px;
            margin: 15px 20px;
            background-color: #E5EAF3;
            padding: 0 15px;
        }

        .input {
            width: 800px;

        }
    }

}

.info2 {
   
    .switch {
        margin: -10px 0 10px 0px;
        display: flex;
        
        .switch-border {
            display: flex;
            text-align: center;

            .switch-word {
                font-size: x-small;
                width: 60px !important;
                height: 20px;
                margin: 12px;
                background-color: #E5EAF3;
                padding: 2px 3px;
            }
        }

        .el-switch {
            margin: 4px;
        }

    }

    .xuanxiang {
        display: flex;
        
        .xuanxiangzhi {
            margin-left: 10px;
            display: flex;
            text-align: center;

            .input {
                width: 780px;
                padding: 5px 0;
            }

            .delete {
                overflow: hidden;
                color: #636466;
                margin: 10px;
            }

            .delete:hover {
                color: #409EFF;
                cursor: pointer;
            }
        }
    }

    .spanBoder {
        display: flex;

        .words {
            font-size: small;
            width: 30px !important;
            height: 20px;
            margin: 12px;
            background-color: #E5EAF3;
            padding: 0 16px;
        }
    }

    .add {
        color: #409EFF;
        margin: 10px 0 0 10px;
    }

    .add:hover {
        cursor: pointer;
    }
}

.info3 {
    display: flex;
    margin-bottom: 15px;
    
    span {
        font-size: small;
        width: 30px;
        height: 20px;
        margin: 15px 20px;
        background-color: #E5EAF3;
        padding: 0 15px;
    }

    .input {
        width: 800px;

    }
}
</style>